<template>
  <div class="tab-wrap flex-row" :class="[border ? 'border' : '', onlyBorder ? 'onlyBorder' : '', size]">
    <div class="tab-list" :class="[type ? type : '', tabList.length <= 1 ? 'onlyOne' : '']">
      <div v-for="item in tabList" :key="item.value" class="tab-item" :class="{ active: item.value === modelValue }" @click="selectTab(item.value)">{{ item.title }}</div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  tabList: {
    type: Array,
    default() {
      return []
    }
  },
  type: { // radioButton
    type: String,
    default: ''
  },
  modelValue: {
    type: null,
    default: ''
  },
  border: {
    type: Boolean,
    default: false
  },
  onlyBorder: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue', 'change', 'search'])

function selectTab(value) {
  if (value !== props.modelValue) {
    emit('update:modelValue', value)
    emit('change', value)
  }
}
</script>

<style scoped lang="scss">
.tab-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  &.border,
  &.onlyBorder {
    border-bottom: 1px solid #e5e5e5;
  }
  &.onlyBorder {
    padding: 0 10px;
    .tab-list {
      .tab-item,
      .tab-item.active {
        background: none !important;
      }
      .tab-item {
        color: #666;
        padding: 0;
        border-bottom: 1px solid transparent;
        margin-bottom: -1px;
        margin-right: 32px;
        &.active {
          font-weight: 700;
          color: var(--color-primary) !important;
          border-bottom: 1px solid var(--color-primary);
        }
      }
    }
  }
  &.small {
    .tab-list {
      .tab-item {
        padding: 0 10px;
        height: 24px;
        font-size: var(--font-size-min);
      }
    }
  }
  .tab-list {
    display: flex;
    align-items: center;
    flex: 1;
    .tab-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 18px;
      height: 32px;
      border-radius: 5px 5px 0 0;
      background: rgba($--color-primary, 0.1);
      margin-right: 10px;
      transition: all linear 0.1s;
      cursor: pointer;
      color: #4a4a4a;
      &.active {
        background-color: $--color-primary !important;
        color: $--color-whites !important;
      }
      &:hover {
        color: $--color-primary;
      }
      &:last-child {
        margin-right: 0;
      }
    }
    &.radioButton {
      margin-left: 1px;
      &.onlyOne {
        .tab-item {
          margin-left: 0;
          border-radius: 4px !important;
        }
      }
      .tab-item {
        background: $--color-whites;
        border: 1px solid #dfdfdf;
        margin-right: 0;
        margin-left: -1px;
        border-radius: 0;
        &:first-child {
          border-radius: 4px 0 0 4px;
        }
        &:last-child {
          border-radius: 0 4px 4px 0;
        }
        &.active {
          border-color: $--color-primary !important;
        }
      }
    }
  }
}
</style>
